<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Use cases: laying out a card</title>

  <style>
    body {
      font: 1.2em Helvetica, Arial, sans-serif;
      margin: 20px;
      padding: 0;
    }

    textarea {
      font-family: monospace;
      display: block;
      margin-bottom: 10px;
      background-color: #F4F7F8;
      border: none;
      border-left: 6px solid #558ABB;
      color: #4D4E53;
      width: 90%;
      max-width: 700px;
      padding: 10px 10px 0px;
      font-size: 90%;
    }

    textarea:nth-of-type(1) {
      height: 140px
    }

    textarea:nth-of-type(2) {
      height: 250px
    }

    .playable-buttons {
      text-align: right;
      width: 90%;
      max-width: 700px;
      padding: 5px 10px 5px 26px;
      font-size: 100%;
    }

    section {
      width: 90%;
      max-width: 700px;
      border: 1px solid #4D4E53;
      border-radius: 2px;
      padding: 10px 14px 10px 10px;
      margin-bottom: 10px;
    }

    section input {
      display: block;
      margin: 5px;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
        grid-gap: 10px;
    }

    .card {
      border: 2px solid rgb(96, 139, 168);
      border-radius: 5px;

    }

    .card .content {
        padding: 10px;
    }

    .card footer {
        background-color: rgba(96, 139, 168, .2);
        padding: 10px;
    }
  </style>
  <style class="editable">
    .card {
      display: flex;
      flex-direction: column;
    }

    .card .content {
        flex: 1 1 auto;
    }
  </style>
</head>

<body>
  <section>
    <div class="cards">
        <div class="card">
            <div class="content">
                <p>This card doesn't have much content.</p>
            </div>
            <footer>Card footer</footer>
        </div>
        <div class="card">
            <div class="content">
                <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
            </div>
            <footer>Card footer</footer>
        </div>
    </div>

  </section>
  <textarea class="playable-css">
.card {
    display: flex;
    flex-direction: column;
}

.card .content {
    flex: 1 1 auto;
}
      </textarea>
  <textarea id="code" class="playable-html">
<div class="cards">
    <div class="card">
        <div class="content">
            <p>This card doesn't have much content.</p>
        </div>
        <footer>Card footer</footer>
    </div>
    <div class="card">
        <div class="content">
            <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
        </div>
        <footer>Card footer</footer>
    </div>
</div>
      </textarea>
  <div class="playable-buttons">
    <input id="reset" type="button" value="Reset">
  </div>
</body>
<script>
  var section = document.querySelector('section');
  var editable = document.querySelector('.editable');
  var textareaHTML = document.querySelector('.playable-html');
  var textareaCSS = document.querySelector('.playable-css');
  var reset = document.getElementById('reset');
  var htmlCode = textareaHTML.value;
  var cssCode = textareaCSS.value;

  function fillCode() {
    editable.innerHTML = textareaCSS.value;
    section.innerHTML = textareaHTML.value;
  }

  reset.addEventListener('click', function () {
    textareaHTML.value = htmlCode;
    textareaCSS.value = cssCode;
    fillCode();
  });

  textareaHTML.addEventListener('input', fillCode);
  textareaCSS.addEventListener('input', fillCode);
  window.addEventListener('load', fillCode);
</script>

</html>
